<template>
<!-- 已审批请假 -->
  <div class="leave-pass">
    <!-- 顶部标题栏组件 -->
    <top-header :leftArrow="leftArrow"></top-header>
    <!-- 中间内容 -->
    <div class="content">
      <!-- 已审批请假列表 -->
      <van-list>
        <van-cell v-for="(item,index) in list" :key="index">
          <template #title>
              <div class="van-title">
              <div class="van-top">
                <span  @click="toDetail(item)">
                  <van-tag plain type="primary" color="burlywood">{{ index + 1 }}</van-tag>
                  <span class="custom-title">{{ item.leaveBeginDate | filterTime }}   至   </span>
                  <span class="custom-title">{{ item.leaveEndDate | filterTime }}</span>
                </span>
              </div>
              <span class="cust-title">{{ item.detailReason }}</span>
            </div>
          </template>
          <template #label>
            <van-tag plain type="primary" color="burlywood">{{ item.proName }}</van-tag>
            <van-tag plain type="primary" color="red" v-if="item.isChecked === '未通过'">审核未通过</van-tag>
            <van-tag plain type="primary" color="burlywood"  v-if="item.isChecked === '已通过'">审核通过</van-tag>
            <van-tag plain type="primary" color="burlywood">{{ item.leaveTypeName }}</van-tag>
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import { TopHeader } from '@/components'
import { GetStaffAPILeaveChecked } from '@/request/api'
export default {
  name: 'User',
  components: {
    TopHeader
  },
  filters: {
    filterTime (val) {
      return val.slice(0, 10)
    }
  },
  data () {
    return {
      leftArrow: true, // 顶部标题栏组件是否有返回按钮
      finished: false, // 请假列表是否已经加载完
      list: [] // 请假数据总量
    }
  },
  created () {
    // 获取已审核请假列表
    const param = { Id: '', formId: '', page: this.pageIndex, pageCount: 10 }
    GetStaffAPILeaveChecked(param).then(res => {
      console.log(res)
      this.list = res.Data
    })
  },
  methods: {
    // 跳转到详情页
    toDetail (value) {
      console.log('跳转到详情页', value)
      sessionStorage.setItem('DATA', JSON.stringify(value))
      this.$router.push({ path: '/leaDetail' })
    }
  }
}
</script>

<style lang="less" scoped>
.leave-pass {
  width: 100%;
  height: 100%;
  .content {
    display: flex;
    flex-direction: column;
    height: calc(100% - 1.2rem);
    .van-list {
      flex: 1;
      overflow: auto;
      .van-cell {
        .van-cell__title {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .van-title {
            display: flex;
            .van-top {
              flex: 1;
              display: flex;
              align-items: center;
              .van-tag {
                margin-left: 2px;
              }
            }
            .cust-title {
              flex: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-align: right;
            }
          }
          .van-tag {
            margin-right: 4px;
          }
          .van-cell__label {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .van-tag:last-child {
              float: right;
            }
          }
        }
      }
    }
  }
}
</style>
